import React, { useState, useEffect } from "react";
import {
  Form,
  Input,
  Button,
  Card,
  message,
  Typography,
  Space,
  Tabs,
} from "antd";
import { UserOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { useMutation } from "@tanstack/react-query";
import { apiService } from "@/services/api";
import { Film } from "lucide-react";
import { motion } from "framer-motion";
import { handleError } from "@/utils/errorUtils";

const { Title, Text, Link } = Typography;

const Login: React.FC = () => {
  const navigate = useNavigate();

  const [activeTab, setActiveTab] = useState("login");
  const [loginForm] = Form.useForm();
  const [registerForm] = Form.useForm();

  // 是否使用的是手机端
  const [isMobile, setIsMobile] = useState(false);

  // 检测是否为移动设备
  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    checkIsMobile();
    window.addEventListener("resize", checkIsMobile);

    return () => {
      window.removeEventListener("resize", checkIsMobile);
    };
  }, []);

  const loginMutation = useMutation({
    mutationFn: apiService.login,
    onSuccess: (data) => {
      if (!data.success) {
        message.error(data.message || "登录失败，请检查用户名和密码");
        return;
      }
      message.success("登录成功，欢迎回来！");
      navigate("/", { replace: true });
    },
    onError: (error: any) => {
      const defaultMessage = "登录失败，请稍后再试";
      const errList = handleError(error.response.data.errors || {}, defaultMessage);
      message.error(errList.join("\n"));
    },
  });

  // 注册mutation
  const registerMutation = useMutation({
    mutationFn: apiService.register,
    onSuccess: (data) => {
      console.log("注册响应数据:", data);
      if (data.success) {
        message.success("注册成功，欢迎使用剪映助手！");
        navigate("/", { replace: true });
      } else {
        message.error(data.message || "注册失败，请重试");
      }
    },
    onError: (error: any) => {
      const defaultMessage = "注册失败，请稍后再试";
      const errList = handleError(error.response.data.errors || {}, defaultMessage);
      message.error(errList.join("\n"));
    },
  });

  const handleLogin = async (values: LoginData) => {
    loginMutation.mutate(values);
  };
  const handleRegister = async (values: any) => {
    const cleanData: any = {
      username: values.username,
      password: values.password,
    };

    if (values.confirmPassword) {
      cleanData.confirmPassword = values.confirmPassword;
    }
    if (values.nickname && values.nickname.trim()) {
      cleanData.nickname = values.nickname.trim();
    }
    if (values.email && values.email.trim()) {
      cleanData.email = values.email.trim();
    }

    console.log("注册数据:", cleanData);
    registerMutation.mutate(cleanData);
  };

  // 动画配置
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        duration: 0.6,
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  };

  const cardVariants = {
    hidden: { x: 50, opacity: 0, scale: 0.9 },
    visible: {
      x: 0,
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.7,
        ease: "easeOut",
      },
    },
  };

  const leftPanelVariants = {
    hidden: { x: -50, opacity: 0 },
    visible: {
      x: 0,
      opacity: 1,
      transition: {
        duration: 0.8,
        ease: "easeOut",
      },
    },
  };

  const bubbleVariants = {
    hidden: { scale: 0, opacity: 0 },
    visible: (i: number) => ({
      scale: 1,
      opacity: 0.7,
      transition: {
        delay: i * 0.2,
        duration: 0.8,
        ease: "easeOut",
      },
    }),
  };

  // 移动端布局
  if (isMobile) {
    return (
      <div
        style={{
          minHeight: "100vh",
          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: "20px",
          position: "relative",
          overflow: "hidden",
          fontFamily:
            "'Huninn', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
        }}
      >
        {/* 移动端标题区域 */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          style={{ textAlign: "center", color: "white", marginBottom: "30px" }} // 从40px减少到30px
        >
          <Space direction="vertical" size={8}>
            {" "}
            {/* 从12减少到8 */}
            <motion.div
              variants={itemVariants}
              style={{ display: "flex", justifyContent: "center" }}
            >
              <Film size={50} color="white" /> {/* 从60减少到50 */}
            </motion.div>
            <motion.div variants={itemVariants}>
              <Title
                level={3} // 从level={2}改为level={3}
                style={{
                  margin: 0,
                  color: "white",
                  fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                  fontWeight: 600,
                }}
              >
                剪映助手
              </Title>
            </motion.div>
            <motion.div variants={itemVariants}>
              <Text
                style={{
                  fontSize: "13px", // 从14px减少到13px
                  color: "rgba(255,255,255,0.8)",
                  fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                }}
              >
                让视频创作更简单，让创意更自由
              </Text>
            </motion.div>
          </Space>
        </motion.div>

        {/* 移动端表单区域 */}
        <motion.div
          variants={cardVariants}
          initial="hidden"
          animate="visible"
          style={{ width: "100%", maxWidth: "350px" }} // 从400px减少到350px
        >
          <Card
            style={{
              width: "100%",
              borderRadius: "12px", // 从16px减少到12px
              boxShadow: "0 6px 24px rgba(0, 0, 0, 0.15)", // 减少阴影
              border: "1px solid rgba(255, 255, 255, 0.1)",
              backgroundColor: "rgba(255, 255, 255, 0.95)",
              backdropFilter: "blur(20px)",
            }}
            bodyStyle={{
              padding: "24px 20px", // 从"32px 24px"减少到"24px 20px"
              fontFamily: "'Huninn', 'PingFang SC', sans-serif",
            }}
          >
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
              style={{ textAlign: "center", marginBottom: "24px" }} // 从32px减少到24px
            >
              <motion.div variants={itemVariants}>
                <Title
                  level={4} // 从level={3}改为level={4}
                  style={{
                    margin: 0,
                    color: "#1890ff",
                    fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                    fontWeight: 600,
                  }}
                >
                  {activeTab === "login" ? "用户登录" : "用户注册"}
                </Title>
              </motion.div>
              <motion.div variants={itemVariants}>
                <Text
                  type="secondary"
                  style={{
                    fontSize: "12px", // 从13px减少到12px
                    fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                  }}
                >
                  {activeTab === "login"
                    ? "请输入您的账号信息"
                    : "创建您的专属账号"}
                </Text>
              </motion.div>
            </motion.div>

            <motion.div
              key={activeTab}
              initial={{ opacity: 0, x: activeTab === "login" ? -20 : 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3 }}
            >
              <Tabs
                activeKey={activeTab}
                onChange={setActiveTab}
                centered
                size="small"
                items={[
                  {
                    key: "login",
                    label: "登录",
                    children: (
                      <motion.div
                        variants={containerVariants}
                        initial="hidden"
                        animate="visible"
                      >
                        <Form
                          form={loginForm}
                          onFinish={handleLogin}
                          layout="vertical"
                          size="small" // 从middle改为small
                        >
                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="username"
                              rules={[
                                { required: true, message: "请输入用户名" },
                              ]}
                            >
                              <Input
                                prefix={<UserOutlined />}
                                placeholder="用户名"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="password"
                              rules={[
                                { required: true, message: "请输入密码" },
                              ]}
                            >
                              <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="密码"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item>
                              <motion.div
                                whileHover={{ scale: 1.02 }}
                                whileTap={{ scale: 0.98 }}
                              >
                                <Button
                                  type="primary"
                                  htmlType="submit"
                                  block
                                  loading={loginMutation.isPending}
                                >
                                  登录
                                </Button>
                              </motion.div>
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <div style={{ textAlign: "center" }}>
                              <Text type="secondary">
                                还没有账号？
                                <Link onClick={() => setActiveTab("register")}>
                                  立即注册
                                </Link>
                              </Text>
                            </div>
                          </motion.div>
                        </Form>
                      </motion.div>
                    ),
                  },
                  {
                    key: "register",
                    label: "注册",
                    children: (
                      <motion.div
                        variants={containerVariants}
                        initial="hidden"
                        animate="visible"
                      >
                        <Form
                          form={registerForm}
                          onFinish={handleRegister}
                          layout="vertical"
                          size="small" // 从middle改为small
                        >
                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="username"
                              rules={[
                                { required: true, message: "请输入用户名" },
                                {
                                  min: 3,
                                  max: 20,
                                  message: "用户名长度3-20个字符",
                                },
                                {
                                  pattern: /^[a-zA-Z0-9_]+$/,
                                  message: "只能包含字母、数字和下划线",
                                },
                              ]}
                            >
                              <Input
                                prefix={<UserOutlined />}
                                placeholder="用户名"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="nickname"
                              rules={[{ max: 50, message: "昵称最多50个字符" }]}
                            >
                              <Input
                                prefix={<UserOutlined />}
                                placeholder="昵称（可选）"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="email"
                              rules={[
                                {
                                  type: "email",
                                  message: "请输入有效的邮箱地址",
                                },
                                { max: 100, message: "邮箱地址最多100个字符" },
                              ]}
                            >
                              <Input
                                prefix={<MailOutlined />}
                                placeholder="邮箱（可选）"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="password"
                              rules={[
                                { required: true, message: "请输入密码" },
                                { min: 6, message: "密码至少6个字符" },
                              ]}
                            >
                              <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="密码"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="confirmPassword"
                              dependencies={["password"]}
                              rules={[
                                { required: true, message: "请确认密码" },
                                ({ getFieldValue }) => ({
                                  validator(_, value) {
                                    if (
                                      !value ||
                                      getFieldValue("password") === value
                                    ) {
                                      return Promise.resolve();
                                    }
                                    return Promise.reject(
                                      new Error("两次输入的密码不一致"),
                                    );
                                  },
                                }),
                              ]}
                            >
                              <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="确认密码"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item>
                              <motion.div
                                whileHover={{ scale: 1.02 }}
                                whileTap={{ scale: 0.98 }}
                              >
                                <Button
                                  type="primary"
                                  htmlType="submit"
                                  block
                                  loading={registerMutation.isPending}
                                >
                                  注册
                                </Button>
                              </motion.div>
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <div style={{ textAlign: "center" }}>
                              <Text type="secondary">
                                已有账号？
                                <Link onClick={() => setActiveTab("login")}>
                                  立即登录
                                </Link>
                              </Text>
                            </div>
                          </motion.div>
                        </Form>
                      </motion.div>
                    ),
                  },
                ]}
              />
            </motion.div>
          </Card>
        </motion.div>

        {/* 移动端气泡装饰 */}
        {[...Array(4)].map(
          (
            _,
            i, // 从5个气泡减少到4个
          ) => (
            <motion.div
              key={i}
              custom={i}
              variants={bubbleVariants}
              initial="hidden"
              animate="visible"
              style={{
                position: "absolute",
                left: `${15 + i * 20}%`, // 调整位置
                top: `${15 + i * 20}%`, // 调整位置
                width: `${25 - i * 3}px`, // 从30减少到25
                height: `${25 - i * 3}px`, // 从30减少到25
                background:
                  i % 2 === 0
                    ? "rgba(255, 255, 255, 0.08)" // 降低透明度
                    : "rgba(255, 255, 255, 0.04)", // 降低透明度
                borderRadius: "50%",
                backdropFilter: "blur(3px)", // 从5px减少到3px
                border: "1px solid rgba(255, 255, 255, 0.08)", // 降低透明度
                zIndex: 0,
                animation: `float ${4 - i * 0.3}s ease-in-out infinite ${i * 0.3}s`,
              }}
            />
          ),
        )}

        {/* CSS动画和字体样式 */}
        <style>{`
        @font-face {
          font-family: 'Huninn';
          src: url('/assets/fonts/Huninn-Regular.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
        }
        
        @keyframes float {
          0%, 100% {
            transform: translateY(0px) scale(1);
            opacity: 0.7;
          }
          50% {
            transform: translateY(-10px) scale(1.05);
            opacity: 1;
          }
        }
        
        .ant-form-item-label > label,
        .ant-input,
        .ant-btn,
        .ant-tabs-tab,
        .ant-typography {
          font-family: 'Huninn', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif !important;
        }
      `}</style>
      </div>
    );
  }

  // 桌面端布局
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "row",
        position: "relative",
        overflow: "hidden",
        fontFamily:
          "'Huninn', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
      }}
    >
      {/* 左侧背景区域 */}
      <motion.div
        variants={leftPanelVariants}
        initial="hidden"
        animate="visible"
        style={{
          flex: 1,
          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "40px",
          position: "relative",
        }}
      >
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          style={{ textAlign: "center", color: "white" }}
        >
          <Space direction="vertical" size={16}>
            <motion.div
              variants={itemVariants}
              style={{ display: "flex", justifyContent: "center" }}
            >
              <Film size={80} color="white" />
            </motion.div>
            <motion.div variants={itemVariants}>
              <Title
                level={1}
                style={{
                  margin: 0,
                  color: "white",
                  fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                  fontWeight: 600,
                }}
              >
                剪映助手
              </Title>
            </motion.div>
            <motion.div variants={itemVariants}>
              <Title
                level={3}
                style={{
                  margin: 0,
                  color: "rgba(255,255,255,0.8)",
                  fontWeight: "normal",
                  fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                }}
              >
                欢迎使用剪映草稿自动化工具
              </Title>
            </motion.div>
            <motion.div variants={itemVariants}>
              <Text
                style={{
                  fontSize: "16px",
                  color: "rgba(255,255,255,0.7)",
                  fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                }}
              >
                让视频创作更简单，让创意更自由
              </Text>
            </motion.div>
          </Space>
        </motion.div>
      </motion.div>

      {/* 右侧表单区域 */}
      <div
        style={{
          flex: 1,
          backgroundColor: "white",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "40px",
          position: "relative",
          zIndex: 2,
        }}
      >
        <motion.div
          variants={cardVariants}
          initial="hidden"
          animate="visible"
          whileHover={{ y: -5 }}
          transition={{ duration: 0.2 }}
        >
          <Card
            style={{
              width: "800px",
              maxWidth: "500px", // 从400px增加到500px
              borderRadius: "12px",
              boxShadow: "0 8px 32px rgba(102, 126, 234, 0.15)",
              border: "1px solid #f0f0f0",
              backgroundColor: "rgba(255, 255, 255, 0.95)",
              backdropFilter: "blur(10px)",
            }}
            bodyStyle={{
              padding: "40px", // 从32px增加到40px
              fontFamily: "'Huninn', 'PingFang SC', sans-serif",
            }}
          >
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
              style={{ textAlign: "center", marginBottom: "40px" }} // 从32px增加到40px
            >
              <motion.div variants={itemVariants}>
                <Title
                  level={2}
                  style={{
                    margin: 0,
                    color: "#1890ff",
                    fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                    fontWeight: 600,
                  }}
                >
                  {activeTab === "login" ? "用户登录" : "用户注册"}
                </Title>
              </motion.div>
              <motion.div variants={itemVariants}>
                <Text
                  type="secondary"
                  style={{
                    fontSize: "14px",
                    fontFamily: "'Huninn', 'PingFang SC', sans-serif",
                  }}
                >
                  {activeTab === "login"
                    ? "请输入您的账号信息"
                    : "创建您的专属账号"}
                </Text>
              </motion.div>
            </motion.div>

            <motion.div
              key={activeTab}
              initial={{ opacity: 0, x: activeTab === "login" ? -20 : 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3 }}
            >
              <Tabs
                activeKey={activeTab}
                onChange={setActiveTab}
                centered
                size="large"
                items={[
                  {
                    key: "login",
                    label: "登录",
                    children: (
                      <motion.div
                        variants={containerVariants}
                        initial="hidden"
                        animate="visible"
                      >
                        <Form
                          form={loginForm}
                          onFinish={handleLogin}
                          layout="vertical"
                          size="large"
                        >
                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="username"
                              rules={[
                                { required: true, message: "请输入用户名" },
                              ]}
                            >
                              <Input
                                prefix={<UserOutlined />}
                                placeholder="用户名"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="password"
                              rules={[
                                { required: true, message: "请输入密码" },
                              ]}
                            >
                              <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="密码"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item>
                              <motion.div
                                whileHover={{ scale: 1.02 }}
                                whileTap={{ scale: 0.98 }}
                              >
                                <Button
                                  type="primary"
                                  htmlType="submit"
                                  block
                                  loading={loginMutation.isPending}
                                >
                                  登录
                                </Button>
                              </motion.div>
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <div style={{ textAlign: "center" }}>
                              <Text type="secondary">
                                还没有账号？
                                <Link onClick={() => setActiveTab("register")}>
                                  立即注册
                                </Link>
                              </Text>
                            </div>
                          </motion.div>
                        </Form>
                      </motion.div>
                    ),
                  },
                  {
                    key: "register",
                    label: "注册",
                    children: (
                      <motion.div
                        variants={containerVariants}
                        initial="hidden"
                        animate="visible"
                      >
                        <Form
                          form={registerForm}
                          onFinish={handleRegister}
                          layout="vertical"
                          size="large"
                        >
                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="username"
                              rules={[
                                { required: true, message: "请输入用户名" },
                                {
                                  min: 3,
                                  max: 20,
                                  message: "用户名长度3-20个字符",
                                },
                                {
                                  pattern: /^[a-zA-Z0-9_]+$/,
                                  message: "只能包含字母、数字和下划线",
                                },
                              ]}
                            >
                              <Input
                                prefix={<UserOutlined />}
                                placeholder="用户名"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="nickname"
                              rules={[{ max: 50, message: "昵称最多50个字符" }]}
                            >
                              <Input
                                prefix={<UserOutlined />}
                                placeholder="昵称（可选）"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="email"
                              rules={[
                                {
                                  type: "email",
                                  message: "请输入有效的邮箱地址",
                                },
                                { max: 100, message: "邮箱地址最多100个字符" },
                              ]}
                            >
                              <Input
                                prefix={<MailOutlined />}
                                placeholder="邮箱（可选）"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="password"
                              rules={[
                                { required: true, message: "请输入密码" },
                                { min: 6, message: "密码至少6个字符" },
                              ]}
                            >
                              <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="密码"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item
                              name="confirmPassword"
                              dependencies={["password"]}
                              rules={[
                                { required: true, message: "请确认密码" },
                                ({ getFieldValue }) => ({
                                  validator(_, value) {
                                    if (
                                      !value ||
                                      getFieldValue("password") === value
                                    ) {
                                      return Promise.resolve();
                                    }
                                    return Promise.reject(
                                      new Error("两次输入的密码不一致"),
                                    );
                                  },
                                }),
                              ]}
                            >
                              <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="确认密码"
                              />
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <Form.Item>
                              <motion.div
                                whileHover={{ scale: 1.02 }}
                                whileTap={{ scale: 0.98 }}
                              >
                                <Button
                                  type="primary"
                                  htmlType="submit"
                                  block
                                  loading={registerMutation.isPending}
                                >
                                  注册
                                </Button>
                              </motion.div>
                            </Form.Item>
                          </motion.div>

                          <motion.div variants={itemVariants}>
                            <div style={{ textAlign: "center" }}>
                              <Text type="secondary">
                                已有账号？
                                <Link onClick={() => setActiveTab("login")}>
                                  立即登录
                                </Link>
                              </Text>
                            </div>
                          </motion.div>
                        </Form>
                      </motion.div>
                    ),
                  },
                ]}
              />
            </motion.div>
          </Card>
        </motion.div>
      </div>

      {/* 气泡装饰效果 */}
      {[...Array(8)].map((_, i) => (
        <motion.div
          key={i}
          custom={i}
          variants={bubbleVariants}
          initial="hidden"
          animate="visible"
          style={{
            position: "absolute",
            left: `${48 + (i % 3) * 2}%`,
            top: `${15 + i * 10}%`,
            width: `${60 - i * 5}px`,
            height: `${60 - i * 5}px`,
            background:
              i % 2 === 0
                ? "rgba(255, 255, 255, 0.15)"
                : "rgba(102, 126, 234, 0.2)",
            borderRadius: "50%",
            backdropFilter: "blur(10px)",
            border: "1px solid rgba(255, 255, 255, 0.2)",
            zIndex: 1,
            animation: `float ${6 - i * 0.5}s ease-in-out infinite ${i * 0.5}s`,
          }}
        />
      ))}

      {/* CSS动画和字体样式 */}
      <style>{`
        @font-face {
          font-family: 'Huninn';
          src: url('/assets/fonts/Huninn-Regular.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
        }
        
        @keyframes float {
          0%, 100% {
            transform: translateY(0px) scale(1);
            opacity: 0.7;
          }
          50% {
            transform: translateY(-10px) scale(1.05);
            opacity: 1;
          }
        }
        
        .ant-form-item-label > label,
        .ant-input,
        .ant-btn,
        .ant-tabs-tab,
        .ant-typography {
          font-family: 'Huninn', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif !important;
        }
      `}</style>
    </div>
  );
};

export default Login;
